<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加规格的页面</title>
</head>
<body>
	<form class="form-inline">
		<input type="hidden" name="id" value="${spec.id }">
		<div class="form-group mx-sm-3 mb-2">
			<input type="text" name="specName" value="${spec.specName }" class="form-control" id="specName"
				placeholder="规格名称" />
		</div>
		<button type="button" class="btn btn-primary mb-2" onclick="addLine()">添加一行</button>
		<br>
		<div>
			<table class="table">
				<tr>
					<th>规格选项名称</th>
					<th>排序</th>
					<th>操作</th>
				</tr>
				<c:forEach items="${spec.optionList }" var="option" varStatus="i">
					<tr>
						<td><input type="text" name="optionList[${i.index }].optionName" value="${option.optionName }" class="form-control" id="a"
							placeholder="规格选项名称" /></td>
						<td><input type="number" name="optionList[${i.index }].orders" value="${option.orders }" class="form-control" id="b"
							placeholder="排序" /></td>
						<td>
							<button type="button" class="btn btn-danger mb-2" onclick="delLine($(this))">删除一行</button>
						</td>
					</tr>
				</c:forEach>
			</table>
		</div>
	</form>
		<button type="button" class="btn btn-danger mb-2" onclick="submitForm()">修改</button>
</body>
<script type="text/javascript">

	//提交表单
	function submitForm(){
		var formData = new FormData($("form")[0]);
		$.ajax({
			url:'./spec/update',
			data:formData,
			type:'post',
			processData:false,
			contentType:false,
			success:function(resp){
				if(resp){
					alert("成功!")
					goPage(1);
				}else{
					alert("失败!")
				}
			}
		})
	}
	//移除一行
	function delLine(obj){
		obj.parent().parent().remove();
	}
	var i = '${spec.optionList.size()}';
	//添加一行
	function addLine() {
		$(".table")
				.append(
						'<tr>'
								+ '<td>'
								+ '<input type="text" name="optionList['+i+'].optionName" class="form-control" id="a" placeholder="规格选项名称"/>'
								+ '</td>'
								+ '<td>'
								+ '<input type="number" name="optionList['+i+'].orders" class="form-control" id="b" placeholder="排序"/>'
								+ '</td>'
								+ '<td>'
								+ '<button type="button" class="btn btn-danger mb-2" onclick="delLine($(this))">删除一行</button>'
								+ '</td>' + '</tr>');
		
		i++;
	}
</script>
</html>